<template>
	<view class="content">
		<u-row style="margin-bottom: 10px;background: #fff;">
			<u-col span="12">
				<view style="margin:auto;width:80%;">
					<u-sticky>
						<u-tabs :list="list" :current="tabindex" @change="tabchange" :scrollable="false"></u-tabs>
					</u-sticky>
				</view>
			</u-col>
		</u-row>

		 
			<view class="" v-if="tabindex==0">
				<view  style="padding-top: 10px;background: #fff;">
					<u-row>
						<u-col span="12">
							<view style="margin:auto;width:95%;color:#fff;">
								<view style="margin-top: 15px;position: absolute;z-index: 99;">
									CTRL@ZWIFT
								</view>
								<view
									style="margin-top: 50px;position: absolute;z-index: 99;font-size: 1.8rem;font-weight:bold;">
									CTRL@ZWIFT周三线上...
								</view>
								<image style="width: 100%;" src="../../static/p1.png"></image>
							</view>
						</u-col>
					</u-row>
					<u-row style="padding-top: 10px;">
						<u-col span="12">
							<view style="margin:auto;width:95%;color:#fff;">
								<view style="margin-top: 15px;position: absolute;z-index: 99;">
									CTRL@ZWIFTaa
								</view>
								<view
									style="margin-top: 50px;position: absolute;z-index: 99;font-size: 1.8rem;color:#fff;font-weight:bold;">
									CTRL@ZWIFT周三线上...
								</view>
								<image style="width: 100%;" src="../../static/p1.png"></image>
							</view>
						</u-col>
					</u-row>

				</view>
			</view>
			<view v-if="tabindex==1">
				<view  style="margin:auto;width:95%;background: #fff;">
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="9">
							<view style="margin:auto;width:100%;">
								<image style="width: 100%;height: 180px;" src="../../static/p1.png"></image>
							</view>
						</u-col>
						<u-col span="3">
							<view style="margin:auto;width:100%;">
								<view
									style="height: 90px;border-bottom: 1px #999 solid;width: 80%;margin: auto;text-align: center;">
									<p>距离</p>
									<p style="font-size: 30px;font-weight: bolder;">4.7</p>
									<p>km</p>
								</view>
								<view
									style="height: 90px;border-bottom: 1px #999 solid;width: 80%;margin: auto;text-align: center;">
									<p>爬升</p>
									<p style="font-size: 30px;font-weight: bolder;">4.7</p>
									<p>m</p>
								</view>
							</view>
						</u-col>
					</u-row>
					<u-row style="padding: 10px;">
						<u-col span="9">
							<view style="height: 80px;margin: auto;line-height: 24px;">
								<p style="font-size: 18px;font-weight: bolder;">南香山爬波</p>
								<p style="font-size: 12px;">南香山爬波起点为半山栏杆处，平均坡度6%，山顶视野开阔适合远眺，全程路...</p>
					
							</view>
						</u-col>
						<u-col span="3">
							<view style="margin:auto;width:100%;">
								<view style="height: 80px;width: 80%;margin: auto;text-align: center;line-height: 60rpx;">
									<p>难度</p>
									<u-rate count="5" v-model="startV" size="12"></u-rate>
									<p>3</p>
								</view>
					
							</view>
						</u-col>
					</u-row>
								
				</view>
			</view>
			<view class="" v-if="tabindex==2">
				<view style="border-bottom: #ddd 1px solid;padding: 20px 20px 20px 10px;margin-bottom: 10px;background: #fff;">
					<u-row @click="info">
						<u-col span="3">
							<view style="margin:auto;width:95%;">
								<image style="width: 100%;height: 80px;" src="../../static/p1.png"></image>
							</view>
						</u-col>
						<u-col span="9">
							<view style="margin:auto;width:100%;height: 80px;padding-left:10px;color: #999;line-height: 60rpx;">
								<view>
									<p style="font-weight: bolder;color: #000;">PREK广州天河旗舰店</p>
									<view style="font-size: 14px;line-height: 22px;"><span
											style="background-color: #333;color: #fff;border-radius: 10px;padding: 0 5px;">联系方式</span>13800138000
									</view>
									<view style="font-size: 14px;line-height: 22px;"><span
											style="background-color: #333;color: #fff;border-radius: 10px;padding: 0 5px;">店铺地址</span>PREK广州天河旗舰店
									</view>
								</view>
							</view>
						</u-col>
					</u-row>
					
				</view>
				 
				<view style="border-bottom: #ddd 1px solid;padding: 20px 20px 20px 10px;margin-bottom: 10px;background: #fff;">
					<u-row @click="info">
						<u-col span="3">
							<view style="margin:auto;width:95%;">
								<image style="width: 100%;height: 80px;" src="../../static/p1.png"></image>
							</view>
						</u-col>
						<u-col span="9">
							<view style="margin:auto;width:100%;height: 80px;padding-left:10px;color: #999;line-height: 60rpx;">
								<view>
									<p style="font-weight: bolder;color: #000;">PREK广州天河旗舰店</p>
									<view style="font-size: 14px;line-height: 22px;"><span
											style="background-color: #333;color: #fff;border-radius: 10px;padding: 0 5px;">联系方式</span>13800138000
									</view>
									<view style="font-size: 14px;line-height: 22px;"><span
											style="background-color: #333;color: #fff;border-radius: 10px;padding: 0 5px;">店铺地址</span>PREK广州天河旗舰店
									</view>
								</view>
							</view>
						</u-col>
					</u-row>
					
				</view>
				 
			</view>
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				tabindex: 0,
				value1: 1,
				value2: 2,
				value3: 3,
				show: true,
				startV: 3.5,
				popupTitle: '123',
				list: [{
					name: '活动',
				}, {
					name: '线路',
				}, {
					name: '车店',
				}],
				options1: [{
						label: '绕圈',
						value: 1,
					},
					{
						label: '休闲',
						value: 2,
					},
					{
						label: '进阶',
						value: 3,
					},
					{
						label: '高阶',
						value: 4,
					},
					{
						label: '挑战',
						value: 5,
					}
				],
				options2: [{
						label: '平路',
						value: 1,
					},
					{
						label: '起伏',
						value: 2,
					},
					{
						label: '爬波',
						value: 3,
					}
				],
				options3: [{
						label: '0-5km',
						value: 1,
					},
					{
						label: '6-15km',
						value: 2,
					},
					{
						label: '15-35km',
						value: 3,
					},
					{
						label: '36-90km',
						value: 4,
					},
					{
						label: '91-200',
						value: 5,
					},
					{
						label: '200+',
						value: 6,
					}
				],
				dataLists: [{
					"name": "测试数据1",
					"id": "1",
					"cid": "cid"
				}, {
					"name": "测试数据2",
					"id": "2",
					"cid": "cid"
				}],
			}
		},
		onLoad() {

		},
		onShow() {
			let id = uni.getStorageSync('menuidex');
			this.tabindex = id ?? 1;
		},
		methods: {
			rightClick() {
				console.log('rightClick');
			},
			leftClick() {
				console.log('leftClick');
			},
			change(e) {
				// console.log('change', e);
			},
			tabchange(e) {
				console.log('tabchange', e);
				this.tabindex = e.index
			},
			info() {
				uni.redirectTo({
					url: '/pages/local/activedetail'
				})
			}
		},
	}
</script>


<style lang="scss">
	@import 'index.scss'; 
</style>